<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <p>用户名：<input type="text" name="user" id=""></p>
        <p>密&emsp;码：<input type="password" name="pwd" id=""></p>
        <p>电&emsp;话：<input type="text" name="phone" id=""></p>
        <p>邮&emsp;箱：<input type="text" name="email" id=""></p>
        <p><input type="reset" value="重置"></p>
    </form>
    <button class="set">创建</button>
    <button class="get">获取</button>
    <button class="del">删除</button>
    <button class="cler">清除</button>
</body>
<script>
    // 通过document.cookie 创建/获取cookie
    // cookie的时效性，通过expires属性设置过期时间
    // 通过path属性设置存储路径，同目录及以下文件均可访问cookie
    // date.toUTCString() 本地时间转世界时间
    var setBtn = document.querySelector(".set");
    var getBtn = document.querySelector(".get");
    var delBtn = document.querySelector(".del");
    var clerBtn = document.querySelector(".cler");
    var user = document.getElementsByName("user")[0];
    var pwd = document.getElementsByName("pwd")[0];
    var phone = document.getElementsByName("phone")[0];
    var email = document.getElementsByName("email")[0];

    //创建
    setBtn.onclick = function () {
        // var use = "123123";
        // var pwd = "a123123";
        // var phone = "13978292828";
        // var email = "22839@qq.com";

        // var date = new Date();
        // date.setDate(date.getDate() + 7);
        // var x = date.toUTCString();
        // document.cookie = `use=${use};expires=${x};path=/`;
        // document.cookie = `pwd=${pwd};expires=${x};path=/`;
        // document.cookie = `phone=${phone};expires=${x};path=/`;
        // document.cookie = `email=${email};expires=${x};path=/`;
        setCookie("user", user.value, 5);
        setCookie("pwd", pwd.value, 5);
        setCookie("phone", phone.value, 5);
        setCookie("email", email.value, 5);
    }

    //获取
    getBtn.onclick = function () {
        console.log(getCookie("pwd"));
        console.log(getCookie("user"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
    }

    //删除
    delBtn.onclick = function () {
        delCookie("user");
        location.reload();
    }

    //清除
    clerBtn.onclick = function() {
        clerCookie();
        location.reload();
    }

    // 创建cookie
    // key：键名 val：键值 day：过期时间 path：存储路径
    function setCookie(key, val, day, path = "/") {
        if (day) { //如果传入过期时间
            var date = new Date();
            date.setDate(date.getDate() + day);
            document.cookie = `${key}=${val};expires=${date.toUTCString()};path=/`;
        } else {
            document.cookie = `${key}=${val};path=/`;
        }
    }

    // 获取cookie
    function getCookie(key) {
        var cookie = document.cookie;
        if (cookie) {
            var list = cookie.split("; "); //将cookie通过"; "拆分成数组
            for (var i = 0; i < list.length; i++) {
                var name = list[i].split("=")[0]; //通过等号拆分，把键名给nane
                var val = list[i].split("=")[1]; //通过等号拆分，把键值给val
                if (key === name) { //如果键值和name相等，直接返回键值
                    return val;
                }
            }
        }
        return "";

        //获取全部
        // var cookie = document.cookie;
        // var obj = {};
        // if (cookie) {
        //     var list = cookie.split("; "); //将cookie通过"; "拆分成数组
        //     for (var i = 0; i < list.length; i++) {
        //         var name = list[i].split("=")[0]; //通过等号拆分，把键名给nane
        //         var val = list[i].split("=")[1]; //通过等号拆分，把键值给val
        //         obj[name] = val;
        //     }
        // }
        // console.log(obj);
    }

    //删除cookie
    function delCookie(key) {
        setCookie(key, "", -1);
    }

    //清除
    function clerCookie() {
        var cookie = document.cookie;
        if (cookie) {
            var list = cookie.split("; "); //将cookie通过"; "拆分成数组
            for (var i = 0; i < list.length; i++) {
                var name = list[i].split("=")[0]; //通过等号拆分，把键名给nane
                var val = list[i].split("=")[1]; //通过等号拆分，把键值给val
                setCookie(name, "", -1);
            }
        }
    }











    // var cookie = document.cookie;
    // console.log(cookie);
    // if (cookie) {
    //     var list = cookie.split("; ");
    //     console.log(list);
    //     var obj = {};
    //     for (var i = 0; i < list.length; i++) {
    //         var name = list[i].split("=")[0];
    //         var val = list[i].split("=")[1];
    //         obj[name] = val;
    //     }
    //     console.log(obj);
    // }









</script>

</html>